<template>
	<view class="page">
		<view class="box_1" :style="{ backgroundImage: 'url('+bg+')' }" @click="service_click">
			<view class="box_9">
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg"
					class="single-avatar_1"></image>
				<view class="block_7">
					<view class="image-text_3">
						<text lines="1" class="text-group_1">张丹妮</text>
						<image @click="member_edit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/422da648266dbe80bf550530668205538e54a798.png"
							class="icon_2"></image>
					</view>
					<view class="tag_1">
						<text lines="1" class="text_2">黄金会员</text>
					</view>
				</view>
			</view>
			<view class="box_10">
				<view class="text-wrapper_8">
					<text lines="1" class="text_3">衡阳奥星</text>
					<text lines="1" class="text_4">尊享四大会员权益</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="width: 100%;overflow: hidden;">
			<view class="list" v-if="list.length" style="padding: 0 30rpx 30rpx 30rpx;">
				<card-pack-item v-for="item in list" :key="item.id" :data="item" :showQrcode="currentTab !== 1"
					:lapse="currentTab === 1" @click="onClick(item)" />
			</view>

			<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</scroll-view>

		<view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;margin-left: 20rpx;">
			请选择续卡套餐
		</view>
		<view class="card" v-for="(item,index) in pointLits" :key="index" @click="gocard(index)"
			:class="[selectcard===index?'card_s':'card']">
			<view class="card_ysj">
				<view v-if="item.zsong != ''" :class="[selectcard===index?'card_ysj_ls':'card_ysj_s']">赠送{{item.zsong}}次
				</view>
			</view>
			<view :class="[selectcard===index?'card_cs_n':'card_cs']">
				<text>次数{{item.cika}}次</text>
				<text :class="[selectcard===index?'card_cs_ss':'card_cs_s']" v-if="item.zsc != ''">+{{item.zsc}}次</text>
			</view>
			<view v-if="item.money != ''" :class="[selectcard===index?'card_jec':'card_je']">
				￥{{item.name}}
			</view>
			<view v-if="item.money == ''" :class="[selectcard===index?'card_jec':'card_jes']">
				￥{{item.name}}
			</view>
			<view v-if="item.money != ''" :class="[selectcard===index?'card_hxs':'card_hx']">
				￥{{item.money}}
			</view>
		</view>
		<view class="" style="position: absolute;bottom: 0;width: 90%;height: 100rpx;left: 5%;">
			<u-button text="确定充值" shape="circle"  @click="renew" style="padding: 0 30rpx;"
				color="linear-gradient(0deg, #ff829f, #FF6884, #FF6884, #FC396B)"></u-button>
			<!-- <button type="default">确定充值</button> -->
		</view>
	</view>
</template>

<script>
	import cardPackItem from './components/card-pack-item.vue'
	import ticketHolder from './components/ticket-holder.vue'
	export default {
		components: {
			cardPackItem,
			ticketHolder
		},
		data() {
			return {
				bg: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/0392bf75fe15a0dac6b61b76f40572ac773da78e.png',
				currentTab: 0,
				tabsList: [{
						name: '票夹'
					},
					{
						name: '卡包'
					}
				],
				list: [{
						
						cardno: "B1120230609135727678",
						else_text: "41次",
						goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/da/d42c864f45a5cd9054d289a0461231.png?attname=%E7%BB%847%402x.png",
						goods_name: "游泳50次卡6.8",
						id: 788,
						is_yxq: null,
						type: 1,
						venue_name: "苏州市体育中心",
						yxq: "长期有效",
					},
					// {
					// 	account_balance: "10.00",
					// 	alias_name: "",
					// 	autoopendate: null,
					// 	card_id: 431,
					// 	cardno: "B3120230801094917594",
					// 	cardstate: 1,
					// 	cardtype: 3,
					// 	consumption_type: [],
					// 	currency: "0.00",
					// 	else_text: "10.00元",
					// 	enddate: "0000-00-00",
					// 	goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/ae/ab123272ec4de6aef9d9d798c742f2.png?attname=231.png",
					// 	goods_name: "800测试卡8.1",
					// 	id: 9328,
					// 	is_yxq: 1,
					// 	last_disabled_date: null,
					// 	left_time: null,
					// 	leftnum: 0,
					// 	order_item_id: "8591",
					// 	product_id: 431,
					// 	recharge_amount: "10.00",
					// 	specify: "",
					// 	startdate: "0000-00-00",
					// 	starttime: "2023-08-01 09:49:17",
					// 	type: 3,
					// 	venue_name: "扬中奥体中心",
					// 	venue_thumb: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg",
					// 	yxq: "0000-00-00 - 0000-00-00",
					// },
					// {
					// 	account_balance: null,
					// 	alias_name: "",
					// 	autoopendate: null,
					// 	card_id: 368,
					// 	cardno: "B2120230525132956935",
					// 	cardstate: 1,
					// 	cardtype: 2,
					// 	consumption_type: [],
					// 	currency: "0.00",
					// 	else_text: "30天",
					// 	enddate: "0000-00-00",
					// 	goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/99/482ccaee01fc2019c94e22c6802feb.png?attname=%E7%BB%848%402x.png",
					// 	goods_name: "游泳个人月卡5.24",
					// 	id: 644,
					// 	is_yxq: 1,
					// 	last_disabled_date: null,
					// 	left_time: 30,
					// 	leftnum: 0,
					// 	order_item_id: "6136",
					// 	product_id: 368,
					// 	recharge_amount: "30.00",
					// 	specify: "",
					// 	startdate: "0000-00-00",
					// 	starttime: "2023-05-25 13:29:56",
					// 	type: 2,
					// 	venue_name: "扬中奥体中心",
					// 	venue_thumb: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg",
					// 	yxq: "0000-00-00 - 0000-00-00",
					// },

				],
				pointLits: [{
						id: '1',
						name: '200.00',
						cika: 20,
						money: '300.00',
						zsong: 20,
						zsc: 20
					},
					{
						id: '2',
						name: '300.00',
						money: '400.00',
						cika: 30,
						zsong: '',
						zsc: ''
					},
					{
						id: '3',
						name: '400.00',
						cika: 40,
						money: '',
						zsong: '',
						zsc: ''
					},
					{
						id: '3',
						name: '400.00',
						cika: 40,
						money: '',
						zsong: '',
						zsc: ''
					}, {
						id: '3',
						name: '400.00',
						cika: 40,
						money: '',
						zsong: '',
						zsc: ''
					},
					{
						id: '3',
						name: '400.00',
						cika: 40,
						money: '',
						zsong: '',
						zsc: ''
					},
					{
						id: '3',
						name: '400.00',
						cika: 40,
						money: '',
						zsong: '',
						zsc: ''
					},
					{
						id: '3',
						name: '400.00',
						cika: 40,
						money: '',
						zsong: '',
						zsc: ''
					},
					{
						id: '3',
						name: '400.00',
						cika: 40,
						money: '',
						zsong: '',
						zsc: ''
					},

				],
				selectPoint: '',
				selectcard: ''
			}
		},
		onLoad() {

		},
		methods: {
			service_click(){
				uni.navigateTo({
					url: './service'
				})
			},
			gocard(index) {
				this.selectcard = index
			},
			member_edit() {
				uni.navigateTo({
					url: './edit_members'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import '../../static/css/member/member_index.scss';
	.page {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.box_1 {
			height: 270rpx;
			background-size: 100% 100%;
			background-position: 0% 0%;
			width: 663rpx;
			display: flex;
			flex-direction: column;
			margin: 19rpx 0 0 43rpx;

			.box_9 {
				width: 236rpx;
				height: 80rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0 0 30rpx;
			}

			.single-avatar_1 {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.block_7 {
				width: 136rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.image-text_3 {
				width: 134rpx;
				height: 29rpx;
				margin-left: 2rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
			}

			.text-group_1 {
				width: 90rpx;
				height: 29rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 30rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 34rpx;
			}

			.icon_2 {
				width: 25rpx;
				height: 27rpx;
				margin-top: 1rpx;
			}

			.tag_1 {
				background-image: linear-gradient(270deg, rgba(204, 168, 121, 1.000000) 0, rgba(204, 168, 121, 1.000000) 0, rgba(229, 199, 152, 1.000000) 100.000000%, rgba(229, 199, 152, 1.000000) 100.000000%);
				border-radius: 6rpx;
				height: 40rpx;
				margin-top: 11rpx;
				display: flex;
				flex-direction: column;
				width: 112rpx;
			}

			.text_2 {
				width: 94rpx;
				height: 23rpx;
				overflow-wrap: break-word;
				color: rgba(108, 62, 0, 1);
				font-size: 24rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 34rpx;
				margin: 3rpx 0 0 9rpx;
			}

			.box_10 {
				width: 623rpx;
				height: 84rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				margin: 65rpx 0 11rpx 29rpx;
			}

			.text-wrapper_8 {
				width: 191rpx;
				height: 65rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.text_3 {
				width: 119rpx;
				height: 23rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 24rpx;
				font-family: SourceHanSansCN-Normal;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
			}

			.text_4 {
				width: 191rpx;
				height: 23rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 24rpx;
				font-family: SourceHanSansCN-Normal;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 19rpx;
			}

			.text_5 {
				width: 160rpx;
				height: 67rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 100rpx;
				font-family: AlegreyaSansSC-Black;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 34rpx;
				margin-top: 17rpx;
			}
		}

		.card {
			width: 30%;
			height: 160rpx;
			// border: 1rpx #2f75fa solid;
			border-radius: 10rpx;
			margin-top: 30rpx;
			float: left;
			margin-left: 16rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8,73,162,0.11);
		}

		.card_s {
			width: 30%;
			height: 160rpx;
			// background-color: #2f75fa;
			background: linear-gradient(0deg, rgba(255,64,64,0.96), rgba(255,64,64,0.7), rgba(250,142,142,0.93));
			border-radius: 10rpx;
			margin-top: 30rpx;
			float: left;
			margin-left: 16rpx;
			color: #ffffff !important;
		}

		.card_hx {
			text-decoration: line-through;
			color: #cfcfcf;
			font-size: 22rpx;
			text-align: center;
			margin-top: 5rpx;
		}

		.card_hxs {
			text-decoration: line-through;
			color: #fff;
			font-size: 22rpx;
			text-align: center;
			margin-top: 5rpx;
		}

		.card_ysj {
			width: 50%;
			height: 30rpx;
			color: #ffffff;
			// background-color: rgb(255, 255, 255);
			font-size: 18rpx;
			text-align: center;
			border-radius: 10rpx 0 10rpx 0;
		}

		.card_ysj_s {
			width: 100%;
			height: 30rpx;
			// background-color: rgb(255, 91, 188);
			background: linear-gradient(0deg, #ff829f, #FF6884, #FF6884, #FC396B);
			border-radius: 10rpx 0 10rpx 0;
		}

		.card_ysj_ls {
			width: 100%;
			height: 30rpx;
			// background-color: rgb(255, 91, 188);
			background: linear-gradient(0deg, #ff829f, #FF6884, #FF6884, #FC396B);
			border-radius: 10rpx 0 10rpx 0;
		}

		.card_cs {
			font-size: 26rpx;
			text-align: center;
			color: #FF6200;
			margin-top: 5rpx;
		}

		.card_cs_n {
			font-size: 26rpx;
			text-align: center;
			color: #ffffff;
			margin-top: 5rpx;
		}

		.card_cs_s {
			color: #f75200;
		}

		.card_cs_ss {
			color: #ffffff;
		}

		.card_je {
			font-size: 36rpx;
			color: #FF4105;
			text-align: center;
			margin-top: 5rpx;
		}

		.card_jec {
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 5rpx;
		}

		.card_jes {
			font-size: 36rpx;
			color: #f75200;
			text-align: center;
			margin-top: 5rpx;
		}

		.text-blue {
			font-size: 24rpx;
			color: #2f75fa;
			text-align: center;
		}


		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				background-color: #f3f3f3;
				padding: 40rpx 0;

				.number {
					color: #2f75fa;
					margin-bottom: 40rpx;
					font-weight: bold;
				}
			}
		}

		/deep/.u-cell-group {
			.name {
				color: #333;
				font-weight: bold;
			}

			.number {
				color: #ff4105;
			}

			.date {
				color: #ccc;
			}

			.rest {
				color: #9c9c9c;
			}

			.rest,
			.date {
				margin-top: 14rpx;
				font-size: 26rpx;
			}
		}
	}
</style>